<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            background: rebeccapurple;
        }
    </style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    canvas.addEventListener('mousedown', getPos)

    function getPos(event) {
        const {clientX, clientY} = event
        const {left, top} = canvas.getBoundingClientRect()
        //获取鼠标相对画布的坐标
        const [x, y] = [clientX - left, clientY - top]
        console.log(x, y)
    }
</script>
</body>
</html>
